<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<!--
 Looks like putting a correct DOCTYPE at the start stops lines from
 displaying on Firefox. may be related to mime/type. Strange. -- haniotak

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ESnet Network Weather Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="lib/slider/css/bluecurve/bluecurve.css" />
    <object width="0" height="0" id="InsetBrowser"
        classid="CLSID:E020ED14-9C19-4228-8E26-CD9B3191725B"></object>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATMLCskmLwPkWymY7xbb8eRQpqcY0i6OAM19wxNHZfelWgiGQtBSN7vmxqFPNYwIxu7pCOQ2AXUBqvA&amp;sensor=false"
            type="text/javascript"></script>

    <!-- weathermap.es.net key: ABQIAAAATMLCskmLwPkWymY7xbb8eRQpqcY0i6OAM19wxNHZfelWgiGQtBSN7vmxqFPNYwIxu7pCOQ2AXUBqvA -->
    <script src="lib/PolylineEncoder.js" type="text/javascript"></script>
    <script src="lib/labeledmarker.js" type="text/javascript"></script>
    <script src="lib/arrow.js" type="text/javascript"></script>
    <script src="src/bezier.js" type="text/javascript"></script>
    <script src="src/renderer.js" type="text/javascript"></script>
    <script src="src/weathermap.js" type="text/javascript"></script>
    <script src="src/metrics.js" type="text/javascript"></script>
    <script src="src/topology.js" type="text/javascript"></script>
    <script src="src/path.js" type="text/javascript"></script>
    <script src="lib/scw.js" type="text/javascript"></script>
    <script type="text/javascript" src="lib/slider/js/range.js"></script>
    <script type="text/javascript" src="lib/slider/js/timer.js"></script>
    <script type="text/javascript" src="lib/slider/js/slider.js"></script>
    
  </head>

  <body onload="initializeFlex()" onunload="GUnload()">
  <div id="content">
    <span id="ruler"></span>
    <div id="header"></div>
    <div id="toolbar">
		<span id="sidebarViewToggle" class="min" title="Hide sidebar"><a href="javascript:toggleFullScreen(false)"></a></span>
    </div>
    <div id="map_canvas" name="map_canvas">
	    <object
	      classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	      id="weathermap"
	      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
	      width="100%"
	      height="100%">
	      <param name="movie" value="weathermap.swf">
	      <param name="quality" value="high">
	      <param name="flashVars" value="key=ABQIAAAATMLCskmLwPkWymY7xbb8eRQpqcY0i6OAM19wxNHZfelWgiGQtBSN7vmxqFPNYwIxu7pCOQ2AXUBqvA">
	      <embed
	        src="weathermap.swf"
	      	name="weathermap"
	        width="100%"
	        height="100%"
	        quality="high"
	        allowscriptaccess="always"
	        flashVars="key=ABQIAAAATMLCskmLwPkWymY7xbb8eRQpqcY0i6OAM19wxNHZfelWgiGQtBSN7vmxqFPNYwIxu7pCOQ2AXUBqvA"
	        pluginspage="http://www.macromedia.com/go/getflashplayer"
	        type="application/x-shockwave-flash">
	      </embed>
	    </object>
    </div>
    <div id="altmap_canvas" name="altmap_canvas">
    <p>Please Install Flash to see the map!!</p>
    </div>
    <div id="sidebar">
        <div id="history" class="sidebarSection">
            <table>
                <tr>
                    <td>Playback</td>
                    <td id="playbackToggle" class="tableMax" title="Show playback options">
                      <a href="javascript:togglePlayback()"></a>
                    </td>
                </tr>
            </table>
            <form id="playbackForm" style="display:none">
                <table id="playbackTable" border="0" cellspacing="5">
                    <tr>
                        <td>Start</td>
                        <td>
                            <input id="startDate" type="text" class="dateSection" title="Use calendar widget to right"/>
                            <img src="images/scw.gif" title="Start date"
                            onclick="scwShow(scwID('startDate'), event);" />
                        </td>
                    </tr>
                    <tr>
                        <td>Hour</td>
                        <td>
                        <select name="startHour">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12" selected="selected">12</option>
                        </select>
                        <select name="startHourOption">
                            <option value="am">am</option>
                            <option value="pm" selected="selected">pm</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td>End</td>
                        <td>
                            <input id="endDate" type="text" class="dateSection" title="Use calendar widget to right" />
                            <img src="images/scw.gif" title="End date"
                            onclick="scwShow(scwID('endDate'), event);" />
                        </td>
                    </tr>
                    <tr>
                        <td>Hour</td>
                        <td>
                        <select name="endHour">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12" selected="selected">12</option>
                        </select>
                        <select name="endHourOption">
                            <option value="am">am</option>
                            <option value="pm" selected="selected">pm</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td id="animationTime" colspan="2">
                            Time:  <b>stopped</b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="playButton" class="playButton" type="button" value="PLAY" onclick="playbackHistory();" />
                        </td>
                        <td>
                            <input id="stepButton" class="stepButton" type="button" value="STEP" onclick="stepLoop();" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="pauseButton" class="pauseButton" type="button" value="PAUSE" onclick="pauseLoop();" />
                        </td>
                        <td>
                            <input id="stopButton" class="stopButton" type="button" value="STOP" onclick="stopLoop();" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Time step <span id="resolution">(minutes)</span>
                        <input id="resValue" class="resValue" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        <div class="slider" id="resSlider" tabIndex="1">
	                <input class="slider-input" id="resSliderInput"/>
                        </div
                        </td>
                    </tr>
                </table>
                <div class="sliderTicks" id="resTicks">
                </div>
            </form>
            <div id="loadingPlaybackPopup" style="display:none">
                <table>
                    <tr>
                        <td align="center">Please wait</td>
                        <td align="center"><img src="images/wait24trans.gif" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="options">
            <table>
                <tr>
                    <td>Options</td>
                    <td id="optionToggle" class="tableMin">
                      <a href="javascript:toggleOptions()"></a>
                    </td>
                </tr>
            </table>
            <form id="form" action="" >
            <ul class="noBullet" id="optionList">
                <li>
                  <fieldset>
                    <legend>Level of Detail</legend>
                    <select name="lod" onchange="dropdown()" onkeyup="dropdown()">
                        <option value="auto">Auto</option>
                        <option value="0">Hubs</option>
                        <option value="1">Routers</option>
                        <option value="2">Detailed</option>
                    </select>
                  </fieldset>
                </li><br/>
                <li>
                  <fieldset>
                    <legend>Level of Utilization</legend>
                    <select name="metricsDD" onchange="metricSelection()" onkeyup="metricSelection()">
                        <option value="0">Percentage </option>
                        <option value="1">% Reserved</option>
                        <option value="2" selected="selected">In Mbps</option>
                    </select>
                    <select name="metricsType" onchange="metricTypeSelection()" onkeyup="metricTypeSelection()">
                        <option value="0" selected="selected">Average</option>
                        <option value="1">Maximum</option>
                    </select>
                    <table class="sliderTable"  border="0" cellspacing="5">
                    <tr>
                        <td>
                            Aggregate <span id="aggregation">(minutes)</span>
                        <input id="aggrValue" class="sliderValue" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                         <div class="slider" id="aggrSlider" tabIndex="1">
                        <input class="slider-input" id="aggrSliderInput"/>
                        </div>
                        </td>
                    </tr>
                    </table>
                <div class="sliderTicks" id="aggrTicks">
                </div>
                  </fieldset>
                </li><br/>
                <li>
                  <fieldset>
                    <legend>Oscars Circuit</legend>
                    <select name="circuitDD" onchange="circuitSelection()" onkeyup="circuitSelection()">
                        <option value="none">None</option>
                    </select>
                  </fieldset>
                </li><br/>
                <li>
                  <fieldset>
                    <legend>Visibility</legend>
                    <table>
                    <tr>
                    <td colspan="2">
                    <input type="checkbox" id="labelsCheckbox" onclick="toggleLabels();" checked="checked" />Labels
                    </td>
                    </tr>
                    <tr>
                    <td>
                    <input type="checkbox" id="ipCheckbox" onclick="toggleIp();"/>IP
                    </td>
                    <td>
                    <input type="checkbox" id="sdnCheckbox" onclick="toggleSdn();"/>SDN
                    </td>
                    </tr>
                    <tr>
                    <td>
                    <input type="checkbox" id="sitesCheckbox" onclick="toggleSites();"/>Labs
                    </td>
                    <td>
                    <input type="checkbox" id="peersCheckbox" onclick="togglePeers();"/>Peers
                    </td>
                    </tr>
                    <tr>
                    <td colspan="2">
                    <input type="checkbox" id="peersOnlyCheckbox" onclick="togglePeersOnly(false);"/>Peers only
                    </td>
                    </tr>
                    <tr>
                    <td colspan="2">
                    <input type="checkbox" id="lvCheckbox" onclick="toggleLogicalView();"/>Logical view
                    </td>
                    </tr>
                    </table>
                  </fieldset>
                </li>
            </ul>
            </form>
        </div>
        <div id="sidebarBottom">
            <div id="keyUtildiv" class="sidebarSection" style="display:none">
                <table>
                    <tr>
                        <td>Utilization</td>
                        <td id="percentToggle" class="tableMin" title="Hide legend">
		                        <a href="javascript:toggleUtilLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table id="percentTable" border="0" cellspacing="5">
                <tr>
                  <td class="key" style="background-color: #990033;"/>
                  <td>50-100%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #CC3333;"/>
                  <td>40-50%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FF9933;"/>
                  <td>30-40%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FFFF00;"/>
                  <td>20-30%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #99FF00;"/>
                  <td>10-20%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #009900;"/>
                  <td>5-10%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #0066CC;"/>
                  <td>0-5%</td>
                </tr>
                </table>
            </div>

            <div id="keyMbpsdiv" class="sidebarSection">
                <table>
                    <tr>
                        <td>Utilization</td>
                        <td id="mbpsToggle" class="tableMin">
		                        <a href="javascript:toggleUtilLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table id="mbpsTable"  border="0" cellspacing="5">
                <tr>
                  <td class="key" style="background-color: #990033;"/>
                  <td>>10000 Mbps</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #CC3333;"/>
                  <td>5000-10000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FF9933;"/>
                  <td>1000-5000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FFFF00;"/>
                  <td>500-1000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #99FF00;"/>
                  <td>250-500</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #009900;"/>
                  <td>100-250</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #0066CC;"/>
                  <td>0-100</td>
                </tr>
                </table>
            </div>
            <div id="markerDiv" class="sidebarSection">
                <table>
                    <tr>
                        <td>Markers</td>
                        <td id="markerToggle" class="tableMin">
		                        <a href="javascript:toggleMarkerLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table id="markers" border="0" cellspacing="0" cellpadding=".2em">
                    <tr>
                        <td><img src="markers/siteIcon.png"/></td>
                        <td>Lab</td>
                        <td><img src="markers/siteAggr.png"/></td>
                        <td>Labs</td>
                    </tr>
                    <tr>
                        <td><img src="markers/peerIcon.png"/></td>
                        <td>Peer</td>
                        <td><img src="markers/peerAggr.png"/></td>
                        <td>Peers</td>
                    </tr>
                    <tr>
                        <td><img src="markers/routerIcon.png"/></td>
                        <td>Router</td>
                        <td><img src="markers/hubIcon.png"/></td>
                        <td>Routers</td>
                    </tr>
                    <tr>
                        <td><img src="markers/routerSiteAggr.png"/></td>
                        <td colspan="3">Labs/routers</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="footer">
       <div class="post">
           <p>Welcome to the alpha version of the ESnet weathermap.</p>
           <h3>Help</h3>
           <div class="indent">
               <h4>Level of Detail</h4>
               <p>Use this control to choose between different amounts of information:
               <ul>
                <li>Auto: will choose an appropriate level of detail based on zoom level.</li>
                <li>Hubs: this choice will group multiple routers together into hubs, as well as
               aggregate all physical connections between them into one drawn line by category (IP and SDN).</li>
                <li>Routers: This will display a marker for each router, but aggregate similar physical connections into a single line on the map.</li>
                <li>Detailed: Like above router, but will display one line per distinct physical connection.</li>
               </ul>
               </p>
               <h4>IP and SDN</h4>
               <p>Use the View IP and View SDN checkboxes to toggle off or on drawing these sets of routers and physical connections. </p>
               <h4>Logical View</h4>
               <p>The default view is based on geographical locations. In many cases, this means that routers are positioned too
               close to distinguish easily at higher levels of detail. Checking the Logical View checkbox will attempt to reposition
               the router icons inside the currently viewable window into a roughly circular layout.
               In addition to these, any other routers that are off the screen but directly connected
               to the visible ones will also be drawn, close to the edges of the map. Click on the checkbox again
               to exit this view mode.</p>
               <h4>Browser</h4>
               <p>To view, please allow JavaScript on your browser. Tested browsers include Firefox and Safari.</p>
               <h4>Contact</h4>
               <p>Evangelos Chaniotakis (haniotak at es.net)</p>
               <hr/>
               <h4>Notices</h4>
        <p>
        <a href="http://www.es.net/" target="_blank">ESnet</a> |
        <a href="http://www.lbl.gov/" target="_blank">Berkeley Lab</a> |
        <a href="http://www.lbl.gov/Disclaimers.html" target="_blank">Notice to Users</a> |
        <a href="thirdParty.html" target="_blank">Acknowledgements</a>
        </p>
           </div>
       </div>
    </div>
    <div style="clear:both;"></div>
  </div>
  </body>
</html>
